
<!-- 顶部导航栏页面 -->
<template>

	<view class="container"
	:style="{ marginTop: headerTop + 'px',height:headerHeight+'px',marginRight:headerRight+'px' }"
	>
		
		<view class="wrapper wx__wrapper"
		>
			
			<!-- 小图标 -->
			<image 
				src="@/static/menu.png" 
				mode="aspectFill" 
				class="icon wx__icon" 
				@click="showDrawer">
			</image>
			
			<!-- 设置栏抽屉 -->
			<uni-drawer ref="showRight" mode="left" :mask-click="false" class="index-setting__drawer" :width="drawer_width">
					<!-- <button @click="closeDrawer" type="primary">关闭Drawer</button> -->
					<view
						class="index-setting"
						:style="{ marginTop: headerTop + 'px'}">
						<view class="index-setting__header flex-column">
							<view class="index-setting__header-title-box flex">
								<view class="flex">
									<image src="/static/backArrow.png" mode="aspectFill" class="index-setting__header-icon" @click="closeDrawer"></image>
									<text class="index-setting__header-title">服务栏设置</text>
								</view>
								<text class="index-setting__header-title--small">管理</text>
							</view>
							<text class="index-setting__header-sub-title">可设置顶部服务栏及添加至手机桌面</text>
						</view>
						
						<view class="index-setting__items">
							
	<!-- 						<setting-item
							:item="sp"
							:is-set="false"
							></setting-item> -->
							
							<setting-item
							v-for="item in settingItems"
							:key="item.id"
							:item="item"
							@tap="onClickTab(item.title)"
							></setting-item>
						</view>
					</view>
			</uni-drawer>
			
			<!-- 滑动标题 -->
			<scroll-view scroll-x="true" class="nav-items wx__nav-items" 
			:style="{lineHeight:headerHeight+'px'}"
			>
				<view 
				class="nav-item"  
				v-for="(item,index) in navItems" 
				:key="index" 
				:class="{'text--active':index===textActiveIndex}" 
				@click="navigateTo(item.page,index)"
				>
					{{item.label}}
				</view>
			</scroll-view>
			

			<image 
				src="@/static/search.png" 
				mode="aspectFill" 
				class="icon"
				@click="navigateToSearchPage">
			</image>
		</view>

	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import settingItem from '@/components/settingItem/settingItem.vue';

import getHeader from '@/utils/getHeaderHeight.js';


const { headerTop, headerHeight, headerRight } = getHeader();

// 使用 ref 创建响应式引用
const navItems = ref([
  { label: '刷最新', page: '/pages/index/index', menu_name: "menu_latest_news", menu_id: 1 },
  // { label: '订阅', page: '/pages/develop/develop', menu_name: "menu_subscribe", menu_id: 2 },
  // { label: '证书查询', page: '/pages/develop/develop', menu_name: "menu_certificate_query", menu_id: 3 },
  // { label: '服务机构', page: '/pages/develop/develop', menu_name: "menu_service_institutions", menu_id: 4 },
  // { label: '赛事', page: '/pages/develop/develop', menu_name: "menu_events", menu_id: 5 },
  // { label: '活动', page: '/pages/develop/develop', menu_name: "menu_activities", menu_id: 6 },
  // { label: '培训', page: '/pages/develop/develop', menu_name: "menu_training", menu_id: 7 },
  // { label: '课程', page: '/pages/develop/develop', menu_name: "menu_courses", menu_id: 8 },
  { label: '直播', page: '/pages/index/live/live', menu_name: "menu_lives", menu_id: 9 },
  { label: '视频', page: '/pages/index/video/video', menu_name: "menu_videos", menu_id: 10 },
  // { label: '赛事排名榜', page: '/pages/develop/develop', menu_name: "menu_event_ranking_list", menu_id: 11 },
  // { label: '动动约', page: '/pages/develop/develop', menu_name: "menu_qmdd_appointment", menu_id: 12 },
  { label: '商城', page: '/pages/index/mall/mall', menu_name: "menu_mall", menu_id: 13 },
  // { label: '资讯', page: '/pages/develop/develop', menu_name: "menu_information", menu_id: 14 },
  // { label: '电商', page: '/pages/commerce/hkIndex/hkIndex', menu_name: "menu_commerce", menu_id: 15 },
]);
const textActiveIndex = ref(0);

const showRight = ref(null)

// 设置栏内容
// const sp = ref({
// 	title:'刷最新'
// })

const settingItems = ref([
	// {title:'证书查询',id:'settingItem01'},
	// {title:'订阅',id:'settingItem02'},
	// {title:'服务机构',id:'settingItem03'},
	// {title:'赛事',id:'settingItem04'},
	// {title:'活动',id:'settingItem05'},
	// {title:'培训',id:'settingItem06'},
	// {title:'课程',id:'settingItem07'},
	{title:'刷最新',id:'settingItem14'},
	{title:'直播',id:'settingItem08'},
	{title:'视频',id:'settingItem09'},
	// {title:'赛事排行榜',id:'settingItem10'},
	// {title:'动动约',id:'settingItem011'},
	// {title:'商城',id:'settingItem012'},
	// {title:'资讯',id:'settingItem013'}
])

// 在左侧栏点击的跳转
function onClickTab(title){
	// console.log('点击左侧栏了');
	navItems.value.forEach((item,index)=>{
		// console.log(item);
		if(item.label===title){
			// console.log('点击左侧栏要跳转了！');
			closeDrawer();
			navigateTo(item.page,index);
		}
	})
}

function showDrawer(){
	showRight.value.open();
}

function closeDrawer() {
	showRight.value.close();
}

// 给tab栏用的路径跳转
function navigateTo(page, index) {
  // console.log('头部tab栏跳转路径:', page); // 打印路径，看看是否正确
  const tabBarList = ['/pages/index/index', '/pages/chat/index', '/pages/user/index'];
  const isTabBar = tabBarList.includes(page);
  // console.log('isTabBar: ', isTabBar);
  
  textActiveIndex.value = index;
  
  uni.setStorage({
    key: 'tabActive',
    data: textActiveIndex.value,
    success: () => {
      // console.log('存储tab成功，textActive: ', textActiveIndex.value);
    }
  });
  
  if (isTabBar) {
    uni.switchTab({ url: page });
  } else {
    uni.navigateTo({ url: page });
  }
}

function navigateToDevelopPage() {
    uni.navigateTo({
        url: '/pages/develop/develop'
    });
}

// 跳转到设置页面
function navigateToSettingPage(){
	uni.navigateTo({
	    url: '/pages/index/toptabbar/topTabbarSetting'
	});
}

function navigateToSearchPage() {
    uni.navigateTo({
        url: '/pages/index/toptabbar/search'
    });
}


onMounted(() => {

});

// const drawerWidth = ref(280);

onShow(()=>{
	uni.getStorage({
		key: 'tabActive',
		success: (res) => {
			// console.log('获取tab成功')
			textActiveIndex.value = res.data;
		},
		fail: () => {
			console.log('获取tab失败')
			textActiveIndex.value = 0;
		}
	});
	// console.log('tab栏的获取 TabActive: ', textActiveIndex.value);
	
	// const {windowWidth} = uni.getWindowInfo(); 
	// console.log(windowWidth);
	// drawerWidth.value = (560/750)*windowWidth;
	// console.log(drawerWidth.value);
	
	// drawerWidth.value = 300;
})

// 动态样式
const drawer_width = computed(()=>{
	const sys_width = uni.getSystemInfoSync().windowWidth;
	return 560 * sys_width / 750;
})
</script>

<!-- 左侧的弹出窗 -->


<style lang="scss" scoped>
	.container{
		width: 100%;
		/* height: 100rpx; */
	}
	
	.wrapper{
		width: 95%;
		height: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}
	
	
	.nav-items{
		width: 50%;
		height: 100%;
		white-space: nowrap;
	}
	
	.nav-item{
		width: fit-content;
		height: 100%;
		/* padding: .5em .3em; */
		margin: 0 .2em;
		font-size: 40rpx;
		text-align: center;
		color: #000;
		display: inline-block;
	}
	
	.text--active{
		color: #fe5100;
	}
	
	.icon{
		width: 40rpx;
		height: 40rpx;
		padding: 10rpx 5rpx;
		margin: 0 10rpx;
		object-fit: cover;
	}
	
	/* wx */
	/* #ifdef MP-WEIXIN */
	.wx__wrapper{
		width: 100%;
	}
	
	.wx__nav-items{
		width: 400rpx;
	}
	
	.wx__icon{
		/* width: ; */
	}
	/* #endif */
	
	.index-setting{
		width: 560rpx;
		&__header{
			width: 560rpx;
			border-bottom: 2rpx solid #f7f7f7;
			box-sizing: border-box;
			padding-left: 50rpx;
			padding-right: 20rpx;
			margin: 0 auto;
			&-title-box{
				justify-content: space-between;
			}
			
			&-title{
				font-size: 40rpx;
				margin-top: .3em;
				margin-bottom: .3em;
				
				&--small{
					font-size: 24rpx;
				}
			}
			
			&-icon{
				width: 34rpx;
				height: 34rpx;
			}
			
			&-sub-title{
				font-size: 32rpx;
				color: #aa2b22;
				margin-bottom: .5em;
			}
		}
		
		&__items{
			width: 100%;
			// height: 100%;
		}
	
	}

	@media screen and (min-width: 600px) {
	    .container{
			width: 100%;
			padding-top: 10rpx;
			padding-bottom: 10rpx;
		}
		.nav-item{
			font-size: 3.5vw;
			margin-right: 40rpx;
		}
		.icon{
			width: 30rpx;
			height: 30rpx;
		}
		.index-setting{
			width: 560rpx;
			&__header{
				padding-left: 30rpx;
				&-title-box{
					font-size: 3vw;
				}

				&-title{
					font-size: 3.5vw;
					margin-top: .3em;
					margin-bottom: .3em;

					&--small{
						font-size: 3vw;
					}
				}

				&-icon{
					width: 20rpx;
					height: 20rpx;
				}

				&-sub-title{
					font-size: 3.5vw;
					color: #aa2b22;
					margin-bottom: .5em;
				}
			}

			&__item{
				&-title{
					font-size: 3vw;
				}
			}

		}
	}

	@media screen and (min-width: 600px) {
		    .container{
				width: 100%;
				padding-top: 10rpx;
				padding-bottom: 10rpx;
			}
			.nav-item{
				font-size: 3.5vw;
				margin-right: 40rpx;
			}
			.icon{
				width: 30rpx;
				height: 30rpx;
			}
			.index-setting{
				width: 560rpx;
				&__header{
					padding-left: 30rpx;
					&-title-box{
						font-size: 3vw;
					}

					&-title{
						font-size: 3.5vw;
						margin-top: .3em;
						margin-bottom: .3em;

						&--small{
							font-size: 3vw;
						}
					}

					&-icon{
						width: 20rpx;
						height: 20rpx;
					}

					&-sub-title{
						font-size: 3.5vw;
						color: #aa2b22;
						margin-bottom: .5em;
					}
				}

				&__item{
					&-title{
						font-size: 3vw;
					}
				}

			}
		}
</style>